<template>
  <view class="container">
    <view class="container_user">
      <view class="container_user_icon">
        <image src="/static/images/user.png" />
      </view>
      <view class="container_user_info">
        <view class="container_user_info_name">
          <view class="container_user_info_name_username">{{
            user.username
          }}</view>
          <view class="container_user_info_name_post"
            >{{ user.dept }}·{{ user.job }}</view
          >
        </view>
        <view class="container_user_company"> 恒鑫模塑有限公司 </view>
      </view>
    </view>
    <view class="container_sale" @click="goSale">
      <image
        src="/static/images/mine_sale_bg.png"
        mode="aspectFit|aspectFill|widthFix"
        class="container_sale_bg"
      >
      </image>
      <view class="container_sale_tip">
        <view class="container_sale_tip_title">销售单</view>
        <view class="container_sale_tip_des">更多销售信息</view>
      </view>
      <view class="container_sale_btn"> 立即查看 </view>
    </view>

    <view class="container_pass" @click="toDetail()">
      <image
        src="/static/images/setting_icon.png"
        mode="widthFix"
        lazy-load="false"
        binderror=""
        bindload=""
        class="container_pass_icon"
      >
      </image>
      <view class="container_pass_content">修改密码</view>
      <uni-icons type="right" size="20"></uni-icons>
    </view>
    <button class="container_logout" @click="logout()">退出登录</button>
  </view>
</template>

<script>
import { appNoticeInfo } from "../../api/user.js";
export default {
  data() {
    return {
      user: "",
      message: "",
    };
  },
  filters: {
    times: function (time) {
      var myDate = new Date(parseInt(time));
      return (myDate =
        myDate.getFullYear() +
        "-" +
        (myDate.getMonth() + 1) +
        "-" +
        myDate.getDate() +
        "");
    },
  },
  onShow() {
    this.user = uni.getStorageSync("user_info");
    appNoticeInfo({
      limit: 0,
      size: 2,
      sort: "id,desc",
    }).then((res) => {
      this.message = res.data.content;
    });
  },
  onLoad() {},
  methods: {
    loadmore() {
      uni.navigateTo({
        url: "../message/index",
      });
    },
    logout() {
      let that = this;
      that.$store.commit("LOGOUT");
      uni.setStorage({
        key: "log_out",
        data: true,
      });
      uni.navigateTo({
        url: "../login/index",
      });
    },
    toDetail() {
      uni.navigateTo({
        url: "../modifypass/index",
      });
    },
	goSale(){
		uni.navigateTo({
        url: "/pages/sale/list",
      });
	}
  },
};
</script>

<style lang="scss">
page {
  background: #F4F5F9;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  &_user {
    display: flex;
    margin-top: 200rpx;
    &_icon {
      width: 30%;
      display: flex;
      align-items: center;
      justify-content: center;
      image {
        width: 150rpx;
        height: 150rpx;
      }
    }
    &_info {
      align-self: center;
      &_name {
        display: flex;
        align-items: baseline;
        &_username {
          font-size: 45rpx;
        }

        &_post {
          margin-left: 20rpx;
          font-size: 26rpx;
          color: #8c8f97;
        }
      }
    }
    &_company {
      margin-top: 10rpx;
      font-size: 26rpx;
      color: #8c8f97;
    }
  }
  &_sale {
    position: relative;
    display: flex;
    align-items: center baseline;
    justify-content: space-between;

    height: 226rpx;
    margin: 40rpx 20rpx;
    &_bg {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: -1;
    }
    &_tip {
      color: white;
      align-self: center;
      margin-left: 20rpx;

      &_title {
        font-size: 36rpx;
      }
      &_des {
        font-size: 26rpx;
        margin-top: 10rpx;
      }
    }
    &_btn {
      width: 160rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      margin-right: 20rpx;
      align-self: center;
      background-color: white;
      border-radius: 30rpx;
      color: #1890ff;
    }
  }
  &_pass {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 25rpx 20rpx;
    margin: 20rpx;
    border-radius: 20rpx;
    box-shadow: 0 4px 12px 1rpx rgba(0, 0, 0, 0.2);
    &_icon {
      width: 40rpx;
    }
    &_content {
      flex: 1;
      margin-left: 10rpx;
    }
  }
  &_logout {
	background-color: white;
    position: fixed;
    bottom: 20rpx;
    left: 20rpx;
    right: 20rpx;
	box-shadow: 0 4px 12px 1rpx rgba(0, 0, 0, 0.2);
	border-radius: 20rpx;
  }
}
button::after {
  border: none;
}
</style>
